﻿@using ThuySan.Bussiness
@model ThuySan.Bussiness.Product
@{
    ViewBag.Title = Model.Name;
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Scripts
{
    <script src="@Url.Content("~/Scripts/jquery.scrollTo-min.js")" type="text/javascript"> </script>
    <script src="@Url.Content("~/Scripts/jquery.serialScroll-min.js")" type="text/javascript"> </script>
    <script src="@Url.Content("~/Scripts/jquery.jqzoom-core.js")" type="text/javascript"> </script>
    <link href="@Url.Content("~/Content/jquery.jqzoom.css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
        };
        jQuery(function ($) {
            $('#more_info_sheets div.tab-page').fadeOut();
            $('#more_info_tabs a').click(function (event) {
                event.stopPropagation();
                $('#more_info_tabs a.selected').removeClass('selected');
                $(this).addClass('selected');
                $('#more_info_sheets div.tab-page').css('display', 'none');
                $($(this).attr('ref')).fadeIn();
            });
            $($('#more_info_tabs a.selected').attr('ref')).fadeIn();


            $('#thumbs_list').serialScroll({
                items: 'li',
                prev: '#view_scroll_left',
                next: '#view_scroll_right',
                offset: -90, //when scrolling to photo, stop 90 before reaching it (from the left)
                start: 1, //as we are centering it, start at the 2nd
                duration: 1200,
                force: true,
                stop: true,
                lock: false,
                cycle: false, //don't pull back once you reach the end
                easing: 'easeOutQuart', //use this easing equation for a funny effect
                jump: true //click on the images to scroll to them
            });

            var options = {
                zoomType: 'standard',
                lens: true,
                preloadImages: true,
                alwaysOn: false,
                zoomWidth: 400,
                zoomHeight: 400,
                xOffset: 90,
                yOffset: 30,
                position: 'left'

            };
            $('.jqzoom').jqzoom(options);
        });

    </script>
}
<!-- Breadcrumb -->
<div class="breadcrumb bordercolor">
    <div class="breadcrumb_inner">
        <a title="return to Home" href="/">Home</a><span class="navigation-pipe">&gt;</span><a href="/@Model.Category.GetUrl()">@Model.Category.Name</a><span
            class="navigation-pipe">&gt;</span>@Model.Name</div>
</div>
<!-- /Breadcrumb -->
<div class="clearfix" id="primary_block">
    <div id="pb-right-column">
        <div class="bordercolor" id="image-block">
            <a href="@Html.UploadPath("Products")@Model.AvatarImage" class="jqzoom"  rel='gal1' >
                <img id="bigpic" class="jqzoom" src="@Html.UploadPath("Products")@Model.AvatarImage" />
            </a>
        </div>
        <div id="views_block">
            <a title="Other views" id="view_scroll_left">Previous</a>
            <div id="thumbs_list">
                <ul id="thumbs_list_frame">
                    @*List images*@
                    @{
                        <li><a class="thickbox bordercolor shown" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '@Html.UploadPath("Products")@Model.AvatarImage',largeimage: '@Html.UploadPath("Products")@Model.AvatarImage'}">
                            <img height="80" width="80" alt="@Model.AvatarImage" src="@Html.UploadPath("Products")80x80_@(Model.AvatarImage)" id="thumb_50">
                        </a></li>

                        foreach (Image image in Model.Images)
                        {
                        <li id="thumbnail_@(image.Id)"><a class="thickbox bordercolor shown" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '@Html.UploadPath("Products")@image.ImageName',largeimage: '@Html.UploadPath("Products")@image.ImageName'}">
                            <img height="80" width="80" alt="@image.ImageName" src="@Html.UploadPath("Products")80x80_@(image.ImageName)" id="thumb_50">
                        </a></li>
                        }

                    }
                    @*End List images*@
                </ul>
            </div>
            <a title="Other views" id="view_scroll_right">Next</a>
        </div>
    </div>
    <div id="pb-left-column">
        <h1>
            @Model.Name</h1>
        <div class="bordercolor" id="buy_block">
            @*<div class="price bordercolor">
                <span class="our_price_display"><span class="price" id="our_price_display">@string.Format("{0:c0}", Model.Price)</span>
                </span>
            </div>*@ @*<div class="other_options bordercolor">
                <div id="other_prices">
                    <p id="old_price">
                        <span id="old_price_display">Giá gốc: @string.Format("{0:c0}", Model.PromotionalPrice)</span>.
                    </p>
                </div>
                <div id="attributes">
                    <span class="discount">@(Model.IsReduced ?? false
                                                     ? ""
                                                     : "Khuyến mãi!")</span>
                    <div class="clearblock">
                    </div>
                </div>
                <div class="clearblock">
                </div>
            </div>*@
            <div class="bordercolor" id="short_description_block">
                <div class="rte align_justify" id="short_description_content">
                    <p>
                        @Model.Description
                    </p>
                </div>
                <p class="buttons_bottom_block">
                    <a class="button" href="javascript:{}">Chi tiết</a></p>
            </div>
            <div class="share bordercolor">
                <!-- AddThis Button BEGIN -->
                <div class="addthis_toolbox addthis_default_style ">
                    @*<a fb:like:layout="button_count" class="addthis_button_facebook_like"></a>*@ <a
                        class="addthis_button_tweet"></a>@*<a g:plusone:size="medium" class="addthis_button_google_plusone"></a>*@
                    <a class="addthis_counter addthis_pill_style"></a>
                </div>
            </div>
            <div class="clearblock">
            </div>
        </div>
    </div>
</div>
<div class="clear" id="more_info_block">
    <ul class="idTabs idTabsShort" id="more_info_tabs">
        <li><a class="selected" ref="#idTab1">Miêu tả chi tiết</a></li>
        <li><a ref="#idTab2">Thông số sản phấm</a></li>
    </ul>
    <div class="bgcolor bordercolor" id="more_info_sheets">
        <div id="idTab1" class="tab-page">
            <div>
                @Html.Raw(Model.Detail)
            </div>
        </div>
        <div id="idTab2" class="tab-page">
            <div>
                <ul class="bullet">
                    @{
                        var q = Model.Category.CategoryPropertys.Join(Model.ProductPropertys, c => c.PropertyId, v => v.PropertyId, (c, v) => new { c, v }).OrderBy(c => c.c.Priority);
                        foreach (var property in q)
                        {     
                                          
                        <li><span>@property.c.Property.Name</span>
                        @{
                            if (property.c.Property.IsBit == true)
                            {
                                if (property.v.Bit == true)
                                { 
                                    @:Có
                                }
                                else
                                { 
                                    @:Không
                                }
                            }
                            else if (property.c.Property.IsNumber == true)
                            {
                                @Html.Raw(property.v.Numer + "");
                            }
                            else {
                                @Html.Raw(property.v.Value + "");
                            }
                        }
                        </li>    
                        }
                    }
                    @*<li><span>Height</span> 10"</li>
                    <li><span>Depth</span> 5"</li>
                    <li><span>Weight</span> 0.3 kg</li>
                    <li><span>Size</span> XXL</li>*@
                </ul>
            </div>
        </div>
    </div>
</div>
